<template>
  <div class="header df_bet">
    <div class="header_box">
      <span
        v-for="(item, index) in navList"
        :key="index"
        @click="handleRouter(item)"
        :class="keyIndex === item.url ? 'highLight' : ''"
        >
        {{ item.cname }} |
      </span>
    </div>
    <img src="../assets/img/logo.jpg" alt="" />
    <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%">
      <span>@ _ @当前板块正在努力建设中...</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { api } from "@/plugins/api/index";
import request from "@/plugins/request";
export default {
  data() {
    return {
      navList: [],
      selectList: [
        "国行标准申报",
        "团体标准综合服务",
        "标准良好行为评价",
        "企业标准服务",
        "标准化培训",
      ],
      keyIndex: "/",
      dialogVisible: false,
    };
  },
  props: {
    list: {
      type: Array, //指定传入的类型
      default: function () {
        return [];
      },
    },
  },
  mounted() {
    const { getMenu } = api;
    switch (this.$route.name) {
      case "index":
        this.keyIndex = "/";
        break;
      case "law":
        this.keyIndex = "law";
        break;
      case "policy":
        this.keyIndex = "policy";
        break;
      case "experience":
          this.keyIndex = "experience";
          break;
      case "contact":
          this.keyIndex = "contact";
          break;
    }

    request(getMenu, {}).then((res) => {
      res.forEach((v,i) => {
        // v.url =list[i];
        this.navList.push(v);
      });

    });
  },
  methods: {
    handleRouter(item) {
      console.log(this.navList);
      // //跳转到对应页面
      if(item.menuType===0){
          if(item.url == "/"){
              this.$router.push("/");
          }
          else{
              this.$router.push(`/${item.url}`);
              this.keyIndex = item.url;
          }

      }else{
          this.dialogVisible = true;
      }

    },
  },
  watch: {
    $route() {
      console.log("当前路由是" + this.$route.name);
      if (this.$route.name == "index") {
        this.keyIndex = "/";
      }
      if (this.$route.name == "law") {
        this.keyIndex = "law";
      }
      if (this.$route.name.indexOf("policy") > -1) {
        this.keyIndex = "policy";
      }
      if (this.$route.name.indexOf("experience") > -1) {
          this.keyIndex = "experience";
      }
      if (this.$route.name.indexOf("contact") > -1) {
          this.keyIndex = "contact";
          console.log("当前路由是="+ this.$route.name);
      }

    },
  },
};
</script>

<style lang="scss" scpoed>
@import "~/assets/css/main.scss";
.header {
  color: #b0b0b0;
  background-color: #337ab7;
  font-size: rem(20);
  height: 50px;
  line-height: 50px;
  padding: 0 rem(160);
  img {
    width: rem(60);
    height: rem(60);
    vertical-align: middle;
    margin-right: rem(100);
    background-color: #fff;
    border-radius: 50%;
  }
  .header_box {
    display: flex;
    span {
      transition: all 0.5s;
      margin-left: rem(10);
      &:hover {
        color: #fff;
        cursor: pointer;
        font-size: rem(25);
      }
    }
  }

  .highLight {
    color: #fff;
    font-size: rem(25);
  }
  // &_box {
  //   margin: 0 auto;
  //   span {
  //     a {
  //       color: #b0b0b0;
  //       transition: all 0.5s;
  //       &:hover {
  //         color: #fff;
  //         // transform: scale(3);
  //         font-size: rem(25);
  //         cursor: pointer;
  //       }
  //     }
  //   }
  //   .el-dropdown {
  //     font-size: rem(20);
  //     color: #b0b0b0;
  //   }
  //   .el-dropdown-link {
  //     cursor: pointer;
  //   }
  //   .el-icon-arrow-down {
  //     font-size: rem(16);
  //   }
  // }
}
</style>
